<template>
<view class="index">
    <!-- 1 顶部搜索框 -->
    <ugo-search></ugo-search>
    <!-- 1 顶部搜索框 -->

    <!-- 2 轮播图 -->
<u-swiper
      :list="swiperList"
      name="image_src"
      height="340"
      border-radius="0"
    ></u-swiper>
    <!-- 2 轮播图 -->

    <!-- 3 导航 -->
    <view class="nav u-flex">
      <!-- navigator这个标签是实现网页跳转的 -->
      <!-- u-padding-x设置内外边距，它是uView组件中内置样式。u-flex是百分比布局，注意：子元素空间： u-flex-x——x >= 1 && x <= 12 -->
      <navigator
        class="u-flex-1 u-p-15"
        v-for="item in navList"
        :key="item.name"
      >
      <!-- widthFix宽度自适应 -->
        <u-image
          mode="widthFix"
          :src="item.image_src"
        ></u-image>
      </navigator>
    </view>
    <!-- 3 导航 -->

    <!-- 4楼层 -->
    <!-- 布局分析，floor是是外层的（因为一共有三层），floor-group是第二层，floor-group-title是最里层的标题部分，floor-group-content是最里层的内容部分 -->
    <!-- u-m-t-10是uview内置样式 -->
    <view class="floor">
      <view class="floor-group u-m-t-10" v-for="item1 in floorList" :key="item1.floor_title.name">
        <!-- 标题部分 -->
        <view class="floor-group-title">
          <u-image mode="widthFix" :src="item1.floor_title.image_src"></u-image>
        </view>
        <!-- 内容部分 -->
        <view class="floor-group-content">
          <navigator v-for="item2 in item1.product_list" :key="item2.name">
            <u-image mode="scaleToFill" :src="item2.image_src" width="100%" height="100%"></u-image>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 4楼层 -->


</view>
</template>

<script>
export default {
  data(){
    return{
      // 轮播图数组
      swiperList:[],
      // 分类导航数组
      navList:[],
      // 楼层数组
      floorList:[]
    }
  },
  // 启动项目触发
  onLoad(){
    // 获取轮播图数据
    // 调用接口
    this.getSwiper()
    // 调用分类导航接口
    this.getNav()
    // 调用楼层接口
    this.getFloor()
  },
  methods: {
    // 获取轮播图数据
    async getSwiper() {
      this.swiperList = await this.$u.http.get("/home/swiperdata");
    },
    // 获取导航数据
    async getNav() {
      this.navList = await this.$u.http.get("/home/catitems");
    },
    // 获取楼层数据
    async getFloor() {
      this.floorList = await this.$u.http.get("/home/floordata");
    },
  },
}
</script>

<style lang="scss">
.floor{
  .floor-group-content {
    // 清除浮动
    overflow: hidden;
  navigator{
    // 浮动
    // 给他儿子加宽高百分百，在爸爸这添加浮动即可
    float: left;
    margin-left: 13rpx;
  }
      /* 第一个导航标签 设置 232 * 386 */
    navigator:first-child {
      width: 232rpx;
      height: 386rpx;
    }
    /* 后四个导航标签 */
    navigator:nth-last-child(-n + 4) {
      width: 233rpx;
      height: 188rpx;
    }
        /* 后2个导航标签 */
    navigator:nth-last-child(-n + 2) {
      margin-top: 10rpx;
    }
  }
}
</style>